<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <!-- 类选择器 -->
  <div class="one">
    hello one
  </div>

  <!-- id 选择器 -->
  <div id = "two">
    hello two
  </div>

  <!-- 复合选择器 -->
  <!-- 后代选择器 -->
  <ul>
    <li>hello ul1</li>
  </ul>

  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
  

  <script>

    // querySelector 参数，就是一个 CSS 选择器
    let div = document.querySelector(".one");
    console.log(div);

    let div2 = document.querySelector("#two");
    console.log(div2);

    // 当querySelector 参数的选择器，匹配到了多个元素的时候，此时返回的对象，就是匹配中的一个元素
    let obj1 = document.querySelector("ul li");
    console.log(obj1);

    let obj2 = document.querySelectorAll("ul li");
    console.log(obj2);

  </script>
  
</body>
</html>